﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="referrer" content="always">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <!--兼容手机不缩小-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="description" content="光华智能AGV云平台、致力于自动储运新境界。">
    <meta name="format-detection" content="telephone=no">
    <title>光华智能AGV状态页面</title>
    <link rel="stylesheet" type="text/css" href="Content/Site2.css">
    <!--<link rel="stylesheet" type="text/css" href="Content/State2.css">-->
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <!--<script src="Scripts/jquery.cookie1.4.1.min.js"></script>-->
    <script src="Scripts/pad.js"></script>

    <!-----------------------------------------------------------------------------
        脚本
    ------------------------------------------------------------------------------>
    <script>
        // 定时获取数据
        var intervar = setInterval(function () {
            getStatus();
        }, 500);

        var timHeart;           // 通讯计时器
        var carData;            // 活动car数据
        function getStatus() {
            $.ajax({
                url: './PadRequest.ashx',
                type: 'post',
                data: {
                    id: 2,
                    name: 'getAGV'
                },
                success: function (res) {
                    try {
                        jsn = $.parseJSON(res);
                        if (jsn.Error == 1) {
                            $('#prompt').text(jsn.str);
                        }
                        else {
                            var carHtml = '';
                            if (!$('.state2').length) {
                                for (var i in jsn) {       //遍历json数组时，这么写p为索引，0,1
                                    carHtml += '<table class="state2" >' +
                                        '<tr><td>编号:</td><td></td></tr>' +
                                        '<tr><td>类型:</td><td></td></tr>' +
                                        '<tr><td>速度:</td><td></td></tr>' +
                                        '<tr><td>电量:</td><td></td></tr>' +
                                        '<tr><td>状态:</td><td></td></tr>' +
                                        '<tr><td>X:</td><td></td></tr>' +
                                        '<tr><td>Y:</td><td></td></tr>' +
                                        '<tr><td>角度:</td><td></td></tr>' +
                                        '</table>';
                                }
                                $(".state").html(carHtml);
                                // 点击AGV参数表
                                $(".state2").click(function () {
                                    carData = this.id;
                                    $("#menuground").show();     // show()方法对应display:block; 或  hide()方法对应display:none;
                                });
                            }
                            for (var i in jsn) {       //遍历json数组时，这么写p为索引，0,1
                                var dom = $('.state2').eq(i);
                                var ji = jsn[i];
                                dom.attr('id', ji.number);

                                dom.find('td').eq(1).text(ji.number);  // 设置第1行的第2列
                                dom.find('td').eq(3).text(ji.type);
                                dom.find('td').eq(5).text(ji.speed);
                                dom.find('td').eq(7).text(ji.soc);
                                dom.find('td').eq(9).text(ji.state);
                                dom.find('td').eq(11).text(ji.x);
                                dom.find('td').eq(13).text(ji.y);
                                dom.find('td').eq(15).text(ji.angle);

                                // 保存活动数据
                                // 浅层复制（只复制顶层的非 object 元素）
                                // var newObject = jQuery.extend({}, oldObject);
                                // 深层复制（一层一层往下复制直到最底层）
                                // var newObject = jQuery.extend(true, {}, oldObject);
                                if ($.type(carData) === "string") {
                                    if (jsn[i].number == carData) {
                                        carData = $.extend({}, jsn[i]);
                                    }
                                }
                            }
                        }
                        $('#prompt').text('');
                    } catch (e) {
                        $('#prompt').text('返回数据格式错误！' + res);
                    }

                    var tim = new Date().getTime();
                    var interval = tim - timHeart;
                    timHeart = tim;
                    $('#interval').text(interval);
                },
                error: function () {
                    $('#prompt').text('响应错误！');
                },
            });
        }
    </script>

    <!-------------------------------------------------------------------------
      样式
    -------------------------------------------------------------------------->
    <style>
        /*活动菜单*/
        .menu a:nth-child(3),
        .menu a:active {
            background: linear-gradient(#0002, #000f);
            color: #fff;
        }

        /*AGV数据*/
        .state2 * {
            float: none;
            /*border: 1px solid #ccc;*/
        }

        .state2 {
            width: 140px;
            color: white;
            background-color: #444;
            margin: 8px;
            padding: 10px;
            /*box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);*/
            /*box-shadow: inset 0 -10px 10px #0002, 0 0 0 2px #fff, 1px 1px 3px #0005;*/
            box-shadow: inset 0 -5px 5px #0002, 0 0 0 2px #884, 1px 5px 8px #0004;
            border-radius: 5px;
            cursor: pointer;
            /*border-collapse: collapse; /*单线*/
        }

            /*测试黄和红底用，以后改用程序控制*/
            .state2:nth-child(3n+2) {
                background-color: #f80;
            }

            .state2:nth-child(3n+3) {
                background-color: #f00;
            }

        /*对话框*/
        /*菜单*/
        #menuground .dialog {
            width: 172.5px;
            height: 260px;
        }

        #menuground [type="button"] {
            width: 120px;
            margin: 5px;
        }

        /*参数*/
        #optground .dialog {
            width: 260px;
            height: 170px;
        }

        #optground div div {
            width: 80px;
            margin: 5px;
            text-align: right;
        }

        #optground [type="text"] {
            width: 100px;
            margin: 5px;
        }

        #optground [type="button"] {
            width: 72px;
            margin: 25px 0px 0px 25px;
        }

        /*数据*/
        #dataground .dialog {
            width: 360px;
            height: 300px;
        }

        #dataground #agvdataCancel {
            padding: 0px 10px;
            float: right;
        }

        #dataground #agvdata {
            margin-top:10px;
            width: 318px;
            height: 230px;
            word-break:break-word;
        }

  </style>
</head>

<!-----------------------------------------------------------------------------
    页面
------------------------------------------------------------------------------>
<body>

    <div class="split"></div>

    <div class="state">
        <!--AGV动态列表-->
    </div>

    <div class="split"></div>

    <!--页脚-->
    <div class="zhouqi">
        <div>周期：</div><div id="interval"></div>
        <div id="prompt"></div>
    </div>

    <div class="split"></div>

    <div class="foot">佛山市光华智能设备有限公司</div>

    <div class="split2"></div>

    <!--对话框-->
    <!--菜单-->
    <div id="menuground" class="dlgground">
        <div class="dialog">
            <input type="button" id="carPause" value="暂停/启动" />
            <input type="button" id="carOutline" value="离线/在线" />
            <input type="button" id="carRemove" value="停用/启用" />
            <input type="button" id="carOptions" value="更改AGV参数" />
            <input type="button" id="carRunData" value="查看AGV数据" />
            <input type="button" id="carClose" value="关闭" />
        </div>
    </div>
    <!--AGV参数-->
    <div id="optground" class="dlgground">
        <div class="dialog">
            <div>AGV编号:</div>
            <input type="text" id="agvip" title="AGV编号" value="" />
            <div>AGV载重:</div>
            <input type="text" id="agvload" title="AGV载重" value="" />
            <input type="button" id="agvoptOK" value="确定" />
            <input type="button" id="agvoptCancel" value="取消" />
        </div>
    </div>
    <!--AGV数据-->
    <div id="dataground" class="dlgground">
        <div class="dialog">
            <div id="AGVNUM">AGV编号:</div>
            <input type="button" id="agvdataCancel" value="关闭" />
            <textarea id="agvdata" title="AGV数据"></textarea>
        </div>
    </div>

</body>
</html>

<!-----------------------------------------------------------------------------
    脚本
------------------------------------------------------------------------------>
<script>
    // 菜单
    // 关闭菜单
    $("#carClose").click(function () {
        $("#menuground").hide();     // show()方法对应display:block; 或  hide()方法对应display:none;
    });
    // 显示AGV参数对话框
    $("#carOptions").click(function () {
        if ($.type(carData) != "object") {
            return;
        }
        $("#menuground").hide();     // show()方法对应display:block; 或  hide()方法对应display:none;
        $('#optground').show();

        $("#agvip").val(carData.number);
        $("#agvload").val(carData.load);
    });

    // 显示AGV数据对话框
    $("#carRunData").click(function () {
        if ($.type(carData) != "object") {
            return;
        }
        $("#menuground").hide();     // show()方法对应display:block; 或  hide()方法对应display:none;
        $('#dataground').show();

        $("#AGVNUM").text('AGV编号：' + carData.number);
        $("#agvdata").val(carData.data);
    });

    // AGV数据
    $("#agvdataCancel").click(function () {
        $("#dataground").hide();     // show()方法对应display:block; 或  hide()方法对应display:none;
    });

    // AGV参数
    $("#agvoptCancel").click(function () {
        $("#optground").hide();     // show()方法对应display:block; 或  hide()方法对应display:none;
    });

    $("#agvoptOK").click(function () {
        if (!confirm("确认要改变AGV参数吗？"))
            return;

        $("#optground").hide();     // show()方法对应display:block; 或  hide()方法对应display:none;
    });
</script>